<template>
	<transition name="prompt-transition" enter-active-class="animated zoomIn"
		leave-active-class="animated zoomOut" v-on:after-leave="afterLeave">
		<div v-if="show" class="prompt-group" v-on:click.stop="">
			<div class="prompt-wrapper" v-bind:class="{'width-btn': btnCounts !== 0}" >
				<div class="prompt-title">
					{{options.title}}
				</div>
				<div class="prompt-msg">
					{{options.msg}}
				</div>
				<div v-if="btnCounts === 1" class="prompt-btn-group">
					<button v-if="options.bottons['OK']" class="btn prompt-btn-one" @click="confirm">{{options.bottons['OK'].text}}</button>
				</div>
				<div v-if="btnCounts === 2" class="prompt-btn-group">
					<button v-if="options.bottons['OK']" class="btn prompt-btn-two confirm" @click="confirm">{{options.bottons['OK'].text}}</button>
					<button v-if="options.bottons['Cancel']" class="btn prompt-btn-two cancel" @click="closed">{{options.bottons['Cancel'].text}}</button>
				</div>
			</div>
		</div>
	</transition>
</template>
<script>
export default {
	name: 'prompt',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		btnCounts: 0,
		options: {
			type: Object,
			default: function () {
				return {
					bottons: [],
				    title: '提示',
				    msg: ''
				}
			}
		}
	},
	data () {
		return {
			buttons: 0
		}
	},
	created: function () {
	},
	methods: {
		confirm: function () {
			this.$emit('confirm')
		},
		closed: function () {
			this.$emit('closed')
		},
		afterLeave: function () {
			this.$emit('afterLeave')
		}
	}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
$prompt_width = 230px
$prompt_height = 230px
$prompt_title_height = 44px
$prompt_btn_height = 65px
	.zoomIn, .zoomOut
		animation-duration 0.5s
	.layout-mask
		position: absolute
		top 0px
		left 0px
		right 0px
		bottom 0px
		width 100%
		height 100%
		z-index 999
		background-color rgba(0, 0, 0, 0.5) !important
		.prompt-group
			position absolute
			top 50%
			left 50%
			width $prompt_width
			height $prompt_height
			margin-top -($prompt_height/2)
			margin-left -($prompt_width/2)
			background-color #ffffff
			border-radius 10px
			box-shadow 0 0 10px #dbdbdb
			.prompt-wrapper
				position relative
				width 100%
				height 100%
				padding-top $prompt_title_height
				padding-left 18px
				padding-right 18px
				font-size 19px
				box-sizing border-box
				&.width-btn
					padding-bottom $prompt_btn_height
				.prompt-title
					position absolute
					top 0px
					left 0px
					width 100%
					height $prompt_title_height
					line-height $prompt_title_height
					text-align center
				.prompt-msg
					height 100%
					overflow-y auto
					overflow-x hidden
				.prompt-btn-group
					position absolute
					left 0px
					bottom 0px
					width 100%
					height $prompt_btn_height
					text-align center						
					.prompt-btn-one
						margin 10px auto
						padding 10px 35px
					.prompt-btn-two
						display inline-block
						margin 10px 0px
						padding 10px 24px
						&.confirm
							margin-left 14px
						&.cancel
							margin-right 14px
</style>
